<template>
  <div>
    <!-- 
        title: 标题
        visible: 控制显示隐藏（默认隐藏）
     -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" :before-close="resetForm">

      <!-- 2、表单 -->
      <div class="myform">
        <el-form :model="goodsForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <!-- <el-form-item label="类名选择" prop="category"> 
                <el-button type="primary" @click="innerVisible = true">类名选择</el-button>
                <span>{{ goodsForm.category }}</span>
            </el-form-item>

            <el-form-item label="商品名称" prop="title">
                <el-input v-model="goodsForm.title"></el-input>
            </el-form-item>
            
            <el-form-item label="商品价格" prop="price">
                <el-input v-model="goodsForm.price"></el-input>
            </el-form-item>

            <el-form-item label="商品数量" prop="num">
                <el-input v-model="goodsForm.num"></el-input>
            </el-form-item>
            
            <el-form-item label="发布时间">
                <el-col :span="11">
                    <el-form-item>
                        <el-date-picker 
                        type="date" 
                        placeholder="选择日期" 
                        v-model="goodsForm.date1"
                        style="width: 100%;"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item>
                        <el-time-picker 
                        placeholder="选择时间"
                        v-model="goodsForm.date2"
                        style="width: 100%;"
                        >
                        </el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item label="商品卖点" prop="sellPoint">
                <el-input v-model="goodsForm.sellPoint"></el-input>
            </el-form-item>

            <el-form-item label="上传图片" prop="image">
                <el-button type="primary" @click="innerVisibleImg = true">上传图片</el-button>
                <img :src="goodsForm.image" style="width: 100px;vertical-align: middle;margin-left: 10px;">
            </el-form-item> -->
            <el-form-item label="装置" prop="devic">
            <el-input v-model="goodsForm.devic" disabled></el-input>
          </el-form-item>
          <el-form-item label="标识" prop="biaos">
            <el-input v-model="goodsForm.biaos"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="equipment_name">
            <el-input v-model="goodsForm.equipment_name"></el-input>
          </el-form-item>

          <el-form-item label="规格型号" prop="specification_and_model">
            <el-input v-model="goodsForm.specification_and_model"></el-input>
          </el-form-item>
          <el-form-item label="设备分类" prop="equipment_classification">
            <el-input v-model="goodsForm.equipment_classification"></el-input>
          </el-form-item>

          <el-form-item label="轴功率(KW)" prop="shaft_power">
            <el-input v-model="goodsForm.shaft_power"></el-input>
          </el-form-item>
          <el-form-item label="制造厂" prop="manufacturer">
            <el-input v-model="goodsForm.manufacturer"></el-input>
          </el-form-item>

          <el-form-item label="额定流量" prop="rated_flow_rate">
            <el-input v-model="goodsForm.rated_flow_rate"></el-input>
          </el-form-item>
          <el-form-item label="简图（嵌入）" prop="image">
                <el-button type="primary" @click="innerVisibleImg = true">上传图片</el-button>
                <img :src="goodsForm.image" style="width: 100px;vertical-align: middle;margin-left: 10px;">
            </el-form-item>

          <el-form-item label="富文本编辑器" prop="descs">
            <!-- 富文本编辑器 -->

            <wangEditor ref="myEditor" @sendEditor="getEditor" />
          </el-form-item>

          <!-- <el-form-item label="规格参数" v-show="isShowParams"> -->

          <!-- <el-form ref="dynForm" label-width="120px" class="demo-dynamic">
                <el-form-item
                  v-for="(item, index) in paramInfo"
                  :label="item.title"
                  :key="index"
                  :prop="item.value"
              >
                  <div class="buttons">
                    <el-input v-model="item.value"></el-input>
                  </div> -->

          <!-- 内层表单项 -->
          <!-- <el-form-item
                    v-for="(ele, i) in item.children"
                    :label="ele.title"
                    :key="i"
                    :prop="ele.value"
                  >
                    <div class="buttons">
                      <el-input v-model="ele.value"></el-input>
                    </div>
                  </el-form-item>
                </el-form-item>
              </el-form> -->

          <!-- </el-form-item> -->
        </el-form>
      </div>

      <!-- 弹窗底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="submitForm" @changePage="changePage">确 定</el-button>
      </span>

      <!-- 1、内弹框 类目选择 -->
      <el-dialog width="30%" title="类目选择" :visible.sync="innerVisible" append-to-body>

        <!-- 树型结构 -->
        <TreeView @sendTreeData="sendTreeData" />

        <!-- 弹窗底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="showTreeData">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 2、内弹框 图片上传 -->
      <el-dialog width="30%" title="图片上传" :visible.sync="innerVisibleImg" append-to-body>

        <!-- 图片上传 -->
        <uploadImg @sendImg="getImgUrl" />

        <!-- 弹窗底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisibleImg = false">取 消</el-button>
          <el-button type="primary" @click="showImgURL">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import TreeView from "./TreeView.vue"
import uploadImg from "@/components/common/uploadImg.vue"
import wangEditor from "@/components/common/wangEditor.vue"
import { addGoods, updateGoods, getCategoryData } from "@/api/index.js"
export default {
  // ["title","rowData"]
  props: {
    title: {
      type: String,
      default: function () {
        return "";
      }
    },
    rowData: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  components: {
    TreeView,
    uploadImg,
    wangEditor
  },
  data() {
    return {
      dialogVisible: false,  //控制显示隐藏
      innerVisible: false,  //控制内弹框显示隐藏（默认是隐藏）
      innerVisibleImg: false,  //图片上传内弹窗显示隐藏
      treeData: {}, // tree
      isShowParams: false,  //是否显示规格参数，默认隐藏
      paramInfo: [],  //规格参数数组
      imgURL: '', // 图片路径
      // 表单数据对象
      goodsForm: {
        id: '',
        devic: '',
        device_number: '',
        asset_number: '',
        device_item: '',
        equipment_name: '',
        specification_and_model: '',
        equipment_classification: '',
        structural_style: '',
        process_medium: '',
        density: '',
        normal_operating_temperature: '',
        maximum_operating_temperature: '',
        import_operating_pressure: '',
        export_operating_pressure: '',
        minimum_continuous_flow_rate: '',
        normal_traffic: '',
        rated_flow_rate: '',
        head: '',
        speed: '',
        trip_speed: '',
        number_of_stages: '',
        single_and_double_suction: '',
        number_of_flow_channels: '',
        required_npshrm_cavitation_allowance: '',
        effective_cavitation_allowance: '',
        lubricating_oil_products: '',
        lubrication_method: '',
        api610_material_code: '',
        shell_material: '',
        shaft_material: '',
        impeller_material: '',
        weight: '',
        unit_price: '',
        shaft_power: '',
        efficiency: '',
        manufacturer: '',
        factory_number: '',
        date_of_production: '',
        date_of_use: '',
        sealing_type: '',
        rinse_plan: '',
        sealing_model: '',
        installation_quantity: '',
        model_of_thrust_bearing: '',
        number_of_installed_thrust_bearings: '',
        radial_bearing_model: '',
        number_of_radial_bearings_installed: '',
        status_monitoring_configuration: '',
        status_monitoring_manufacturer: '',
        coupling_type: '',
        drive_form: '',
        variable_speed_type: '',
        motor_model: '',
        motor_power: '',
        motor_rated_speed: '',
        motor_rated_voltage: '',
        motor_rated_current: '',
        motor_manufacturer: '',
        equipment_classfication: '',
        diagram: '',
        remarks: '',
        descs: '',
        biaos:''





      },
      rules: {
        title: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
    

  },
  //侦听器：侦听到属性的变化之后
  watch: {
    rowData(val) {
      console.log("tt",val);
      this.goodsForm = val;
      console.log('yyu',this.goodsForm.device_number)
      // editor.txt.html('<p>xxxxx</p>')    //重新设置编辑器内容
      // data、computed、props、watch、method 在created的时候已经初始化完成了,所以找不到DOM元素
      // 延时操作DOM
      this.$nextTick(() => {  //获取到DOM元素才执行
        this.$refs.myEditor.editor.txt.html(val.descs);
      })

      //两次点击同一条数据，修改商品表单，第二次没数据==》原因：侦听器没有侦听到rowData值的滨化

      //是否显示规格参数
      if (val.paramsInfo) {
        //显示
        this.isShowParams = true;
        this.paramInfo = JSON.parse(val.paramsInfo);
      }
    }
  },
  methods: {
    // 接收tree子组件传递过来的数据，选择的是哪个节点
    sendTreeData(val) {
      this.treeData = val;
    },
    // 接收上传图片子组件传递过来的图片路径
    getImgUrl(url) {
      this.imgURL = url;
    },
    // 展示图片
    showImgURL() {
      // 图片上传弹窗隐藏
      this.innerVisibleImg = false;
      // 再将图片路径复制给goodsFor显示
      this.goodsForm.image = this.imgURL;
    },
    // 展示点击的tre节点
    async showTreeData() {
      // 隐藏内弹窗
      this.innerVisible = false;
      // 展示类目 {id:'',cid:'',name:''}
      this.goodsForm.category = this.treeData.name;
      this.goodsForm.cid = this.treeData.cid;

      // 是否显示规格参数，请求后台
      try {
        const res = await getCategoryData({ cid: this.treeData.cid });
        console.log(res);
        if (res.status === 200) {
          // 显示规格参数
          this.isShowParams = true;
          let info = res.result[res.result.length - 1];
          // console.log(info);
          this.paramInfo = JSON.parse(info.paramData);
          console.log(this.paramInfo);
        } else {
          // 没有参数配置，隐藏
          this.isShowParams = false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取editor数据
    getEditor(val) {
      this.goodsForm.descs = val;
    },
    // 提交表单
    // 参数： title cid  category sellPoint price num desc paramsInfo image
    submitForm(formName) {  // eslint-disable-line no-unused-vars
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          console.log("dafas", this.goodsForm);

          //对象合并  let obj1 = Object.assign(obj1,obj2);  //将obj2合并到obj1上变成一个新的obj1
          Object.assign(this.goodsForm, {
            paramsInfo: JSON.stringify(this.paramInfo)
          })

          if (this.title === "商品添加") {
            try {
              const res = await addGoods(this.goodsForm);
              console.log(res);
              if (res.status == 200) {  //成功

                this.$parent.getGoodsList(1);  // 更新父组件列表数据
                this.changePage()  //让页码在在第一页高亮
                this.$message({
                  message: '恭喜你，添加成功！',
                  type: 'success'
                });
                // 清空表单
                this.resetForm();
              } else {
                this.$message.error('添加失败.....');
              }
            } catch (error) {
              console.log(error);
              this.$message.error('填写错误，请检查数据!!!');
            }
          } else {
            console.log('编辑', this.goodsForm);
            // 参数：id title cid  category sellPoint price num desc paramsInfo image
            try {
              const res = await updateGoods(this.goodsForm);
              console.log(res);
              if (res.status == 200) {  //成功

                this.$parent.getGoodsList(1);  // 更新父组件列表数据
                this.changePage()  //让页码在在第一页高亮
                this.$message({
                  message: '修改设备成功！',
                  type: 'success'
                });
                // 清空表单
                this.resetForm();
              } else {
                this.$message.error('修改设备失败.....');
              }
            } catch (error) {
              console.log(error);
              this.$message.error('填写错误，请检查数据.....');
            }
          }
        } else {
          console.log('error submit!!');
          this.$message.error('填写错误，请检查数据。。。。。');
          return false;
        }
      });
    },
    // 添加或编辑商品子组件触发页码改变事件
    changePage(page) {
      this.$emit("changePage", page);  // 自定义事件（子传父）
    },
    // 重置表单
    resetForm(formName) { // eslint-disable-line no-unused-vars
      // this.$refs[formName].resetFields();

      // 1、隐藏弹窗
      this.dialogVisible = false;
      // 2、清空表单
      // 表单数据对象
      this.goodsForm = {
        cid: '',
        category: '',  //类目
        title: '',   //商品名称
        price: '',   //价格
        num: '',   //数量
        date1: '',
        date2: '',
        sellPoint: '',  //卖点
        image: '',   //上传图片
        descs: ''   //描述
      }
      // 3、清空富文本    editor.txt.clear()
      this.$refs.myEditor.editor.txt.clear();
      // 清空规格参数
      this.paramInfo = [];
      this.isShowParams = false;
    }
  }
};
</script>

<style lang="less" scoped>
.myform {
  padding: 20px;

  .line {
    text-align: center;
  }
}
</style>